<template>
  <div class="pie-chart" :style="{height:height,width:width}"></div>
</template>

<script>
export default {
  name: "PieChart",
  props:{
    title:{
      default:''
    },
    data:{
      default(){
        return []
      }
    },
    width: {
      type: String,
      default: '300px'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data(){
    return {
      pieChart:null
    }
  },
  watch:{
    data:{
      handler(val) {
        this.createEcharts(val);
      }
    }
  },
  methods:{
    createEcharts(v){
      let chart = this.$echarts.init(this.$el);
      let ops = {
        color:this.$store.state.baseDict.colorList,
        title:{
          text:this.title,
          textStyle:{
            fontSize: 16,
            color:'#FFF'
          },
          bottom:0,
          left:'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center',
          textStyle:{
            color:'#FFF',
            fontSize:12
          },
          itemWidth:40,
          itemHeight:15
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '60%'],
            center:['50%','50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 30,
                color:'#FFF',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: v
          }
        ]
      };
      chart.setOption(ops);
      this.pieChart = chart;
    },
  }
}
</script>

<style lang="scss" scoped>
  .pie-chart{
    width: 100%;
    height: 100%;
  }
</style>
